<template>
  <div>
    <FosoCard
      buttonname="新增角色"
      class="cleartable"
      title="角色管理"
      @confirm-handle="openhandle"
    >
      <!-- 表格 -->
      <Grid :border="true">
        <!-- 使用 toolbar-buttons 插槽添加自定义按钮 -->
        <template #toolbar-buttons>
          <el-button class="ml-auto" type="primary" @click="openhandle">
            新增角色
          </el-button>
        </template>
      </Grid>
    </FosoCard>
    <!-- 弹窗框 -->
    <Drawer class="w-[35%]" title="我是标题" />
  </div>
</template>

<script setup lang="tsx">
import type { RowType } from './type';

import type { VxeGridListeners } from '#/adapter/vxe-table';

import { useVbenDrawer } from '@vben/common-ui';

import { useVbenVxeGrid } from '#/adapter/vxe-table';

import ExtraDrawer from './components/drawer.vue';
// 弹窗连接
const [Drawer, drawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: ExtraDrawer,
});
// 数据
const data = ref([
  {
    id: 1,
    name: '系统管理',
    type: '目录',
  },
  {
    id: 2,
    name: '用户管理',
    type: '目录',
  },

  {
    name: '角色管理',
    type: '目录',
  },
  {
    name: '菜单管理',
    type: '目录',
  },
  {
    name: '权限管理',
    type: '目录',
  },
  {
    name: '日志管理',
    type: '目录',
  },
  {
    name: '系统设置',
    type: '目录',
  },
  {
    name: '数据字典',
    type: '目录',
  },
]);

// 表格配置项
const gridOptions = {
  data: data.value,
  border: true,
  columns: [
    {
      title: '角色名称',
      field: 'name',
    },
    {
      title: '角色值',
      field: 'type',
    },
    {
      title: '状态',
      field: 'path',
    },
    {
      title: '备注',
      field: 'component',
    },

    // 创建时间
    {
      title: '创建时间',
      field: 'createTime',
    },
  ],
  keepSource: true,
  exportConfig: {},
  toolbarConfig: {
    slots: {
      buttons: 'toolbar-buttons', // 指定自定义按钮插槽名称
    },
    custom: true,
    export: true,
    import: true,
    refresh: true,
    zoom: true,
  },
  treeConfig: {
    transform: true, // 自动将 parentId 转换为树形结构
    lazy: false, // 非懒加载
    indent: 20, // 缩进宽度
  },
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
};
// 表格事件
const gridEvents: VxeGridListeners<RowType> = {};
const openhandle = () => {
  drawerApi.open();
};
// 表格实例
const [Grid] = useVbenVxeGrid({ gridEvents, gridOptions });
</script>
